<template>
  <el-card class="profile-info-card">
    <h3 class="card-title">我的评论</h3>
    <div class="comments-container">
      <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="refreshComments"
          style="margin-bottom: 20px"
      >
        刷新
      </el-button>
      <el-table
          :data="myCommentsList"
          style="width: 100%"
          border
          stripe
      >
        <el-table-column
            prop="productImage"
            label="商品图片"
            align="center"
        >
          <template #default="scope">
            <img
                :src="scope.row.productImage"
                alt="商品图片"
                style="width: 50px; height: 50px; border-radius: 5px"
            />
          </template>
        </el-table-column>
        <el-table-column
            prop="productName"
            label="商品名称"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="commentContent"
            label="评论详情"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="rating"
            label="评分"
            align="center"
            width="180">
          <template #default="scope">
            <el-rate
                v-model="scope.row.rating"
                :max="5"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
            ></el-rate>
          </template>
        </el-table-column>
        <el-table-column
            prop="commentTime"
            label="评论时间"
            align="center"
        ></el-table-column>
        <el-table-column
            label="操作"
            align="center"
        >
          <template #default="scope">
            <el-button
                type="text"
                @click="deleteComment(scope.row.commentId)"
                style="color: #f56c6c"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
            small
            :hide-on-single-page="true"
            layout="prev, pager, next"
            @size-change="handleMyCommentsSizeChange"
            @current-change="handleMyCommentsCurrentChange"
            :current-page="myCommentsPage.currentPage"
            :page-sizes="[5, 10]"
            :page-size="myCommentsPage.pageSize"
            :total="myCommentsPage.total"
            class="pagination"
        ></el-pagination>
      </div>
    </div>
  </el-card>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import {pageComents, deleteComments, pageComments} from "@/api/myCommentsApi";

export default {
  name: 'MyComments',
  data() {
    return {
      myCommentsList: [],
      myCommentsPage: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
    };
  },
  computed: {
    ...mapGetters({
      getUser: 'user/getUser'
    }),
  },
  methods: {
    ...mapMutations({
      loadUser: 'user/LOAD_USER'
    }),
    fetchComments() {
      const params = {
        pageRequestDto: {
          page: this.myCommentsPage.currentPage,
          size: this.myCommentsPage.pageSize
        },
        users: this.getUser
      };
      pageComments(params)
          .then(response => {
            console.log('获取评论成功:', response.data);
            this.myCommentsList = response.data.records;
            this.myCommentsPage.total = response.data.total;
          })
          .catch(error => {
            console.error('获取评论失败:', error);
          });
    },
    deleteComment(commentId) {
      deleteComments(commentId)
          .then(() => {
            this.fetchComments();
          })
          .catch(error => {
            console.error('删除评论失败:', error);
          });
    },
    handleMyCommentsSizeChange(newSize) {
      this.myCommentsPage.pageSize = newSize;
      this.fetchComments();
    },
    handleMyCommentsCurrentChange(newPage) {
      this.myCommentsPage.currentPage = newPage;
      this.fetchComments();
    },
    refreshComments() {
      // 重置分页信息并重新加载评论
      this.myCommentsPage.currentPage = 1;
      this.fetchComments();
      this.$message.success('评论列表已刷新');
    }
  },
  mounted() {
    this.loadUser();
    console.log('Loaded user:', this.getUser); // 检查用户信息是否加载成功
    this.fetchComments();
  }
};
</script>

<style scoped>
.profile-info-card {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.comments-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 增大上下部分的间距 */
}

.el-table {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end; /* 将分页条置于右侧 */
  width: 100%;
}

.pagination {
  width: 200px; /* 缩短分页条的宽度 */
}

.el-button {
  margin-right: 10px;
}
</style>